import { useContext, PureComponent } from "react";
import Context from "../../context";

// var Context = createContext(0);
// console.log("Context");
// console.log(Object.prototype.toString.call(Context).slice(1,8));

//以 consumer 的形式使用
export class Item1 extends PureComponent {
    constructor(props){
        super(props);
        this.state = {
            name : "katy",
            age: 30
        }
        this.changeName = this.changeName.bind(this);
    }
    changeName(e){
        this.setState({
            // name: "win7",
            age: 29
        })
    }
    static contextType = Context;
    render() {
        console.log("this.context");
        console.log(this.context);
        console.log("state:");
        console.log(this.state);
        return (
            <div>
                <button onClick={this.changeName}>change name</button>
                <Context.Consumer>
                    {
                        ({ name }) => (<div>组件 Item1 ：{name}</div>)
                    }
                </Context.Consumer>
            </div>
        );
    }
}

//contextType、this.cntext
export class Item2 extends PureComponent {
    static contextType = Context;
    render() {
        var count = this.context;
        return (
            <div>组件 Item2 ：{count.name}</div>
        );
    }
}

//useContext 是获取原本就设置的 context 的？
export function Item3() {
    const count = useContext(Context);
    console.log("useContext:");
    console.log(count);
    return (<div>组件 Item3 ：{count.name}</div>);
}

